import { _decorator, Color, Component, director, Material, Node, Sprite, tween, UITransform, screen, view } from 'cc';
import { aaEvent } from '../frame/common/Enums';
const { ccclass, property } = _decorator;

const tempCol = new Color();

@ccclass('BgView')
export class BgView extends Component {

    private sp:Sprite;
    private _mat:Material = null;
    private _mixUniform = 0;
    private _bgUniform = 0;

    private _mix = 0
    private _bg = 0

    set mix(v){
        this._mix =v;
        this._mat.passes[0].setUniform(this._mixUniform,v)
    }

    get mix(){
        return this._mix;
    }
    set bg(v){
        this._bg =v;
        this._mat.passes[0].setUniform(this._bgUniform,v)
    }

    get bg(){
        return this._bg;
    }


    start() {
        this.sp = this.node.getComponent(Sprite);
        this._mat = this.sp.customMaterial;
        director.on(aaEvent.changeCol,this.changeCol,this);
        this._mixUniform=this._mat.passes[0].getHandle("mixRange");
        this._bgUniform=this._mat.passes[0].getHandle("bgRange");
        this.node.getComponent(UITransform).width = this.getViewWidth();
    }
    getViewWidth(){
        return Math.max(screen.windowSize.width||view.getVisibleSize().width,750);;
    }

    changeCol(range1 =1,range2 =-1){
        const self = this.getComponent(BgView);
        if(range2>= 0){
            tween(self).delay(0.05).to(1.5, {bg: range2}).start();
        }else{
            /* change size for desktop */
            const width = range1>0?750:this.getViewWidth();
            if(range1<1){
                this.node.getComponent(Sprite).color = tempCol.fromHEX("#d02180");
            }
            const trans = this.node.getComponent(UITransform);
            tween(trans).to(0.3,{width: width}).start();
            tween(self).delay(0.2).to(1.6, {mix: range1}).start();
        }
 
    }



}

